extends ../_layout

block active
  - sidebar_active = 'widgets.html'

block content
  h3 Widgets

  // START row
  .row
    .col-lg-4
      // START widget
      .panel.widget
        .panel-body
          .text-right.text-muted
            em.fa.fa-gamepad.fa-2x
          h3.mt0 99.999
          p.text-muted Games played last month
          .progress.progress-striped.progress-xs
            .progress-bar.progress-bar-warning.progress-60(role='progressbar', aria-valuenow='60', aria-valuemin='0', aria-valuemax='70')
              span.sr-only 60% Complete
      // END widget
    .col-lg-4
      // START widget
      .panel.widget
        .panel-body
          .text-right.text-muted
            em.fa.fa-coffee.fa-2x
          h3.mt0 300 
          p.text-muted Coffee cups per day
          .progress.progress-striped.progress-xs
            .progress-bar.progress-bar-green.progress-80(role='progressbar', aria-valuenow='80', aria-valuemin='0', aria-valuemax='100')
              span.sr-only 80% Complete
      // END widget
    .col-lg-4
      // START widget
      .panel.widget
        .panel-body
          .text-right.text-muted
            em.fa.fa-upload.fa-2x
          h3.mt0 1000 Gb
          p.text-muted Average Monthly Uploads
          .progress.progress-striped.progress-xs
            .progress-bar.progress-bar-info.progress-40(role='progressbar', aria-valuenow='40', aria-valuemin='0', aria-valuemax='100')
              span.sr-only 40% Complete
      // END widget
  // END row
  // START row
  .row
    .col-lg-4
      // START widget
      .panel.widget
        .row.row-table.row-flush
          .col-xs-6.bb.br
            .row.row-table.row-flush
              .col-xs-4.text-center.text-info
                em.fa.fa-users.fa-2x
              .col-xs-8
                .panel-body.text-center
                  h4.mt0 10k
                  p.mb0.text-muted VISITORS
          .col-xs-6.bb
            .row.row-table.row-flush
              .col-xs-4.text-center.text-danger
                em.fa.fa-music.fa-2x
              .col-xs-8
                .panel-body.text-center
                  h4.mt0 100%
                  p.mb0.text-muted VOLUME

        .row.row-table.row-flush
          .col-xs-6.br
            .row.row-table.row-flush
              .col-xs-4.text-center.text-inverse
                em.fa.fa-code-fork.fa-2x
              .col-xs-8
                .panel-body.text-center
                  h4.mt0 150 
                  p.mb0.text-muted FORKS
          .col-xs-6
            .row.row-table.row-flush
              .col-xs-4.text-center.text-success
                em.fa.fa-inbox.fa-2x
              .col-xs-8
                .panel-body.text-center
                  h4.mt0 10
                  p.mb0.text-muted NEW MESSAGES
      // END widget
      // START widget
      .panel.widget
        .row.row-table.row-flush
          .col-xs-6.bb.br
            .row.row-table.row-flush
              .col-xs-4.text-center.text-info
                // Bar chart
                div(data-sparkline="", data-bar-color="#5d9cec", data-height="20", data-bar-width="3", data-bar-spacing="2", data-values="5,9,4,1,3,4,7,5")
              .col-xs-8
                .panel-body.text-center
                  h4.mt0 10k
                  p.mb0.text-muted VISITORS
          .col-xs-6.bb
            .row.row-table.row-flush
              .col-xs-4.text-center.text-danger
                // Bar chart
                div(data-sparkline="", data-bar-color="#5d9cec", data-height="20", data-bar-width="3", data-bar-spacing="2", data-values="1,2,3,4,5,6,7,8,9")
              .col-xs-8
                .panel-body.text-center
                  h4.mt0 100%
                  p.mb0.text-muted CONVERSIONS

        .row.row-table.row-flush
          .col-xs-6.br
            .row.row-table.row-flush
              .col-xs-4.text-center.text-inverse
                // Bar chart
                div(data-sparkline="", data-bar-color="#5d9cec", data-height="20", data-bar-width="3", data-bar-spacing="2", data-values="1,0,4,9,5,7,8,4,7")
              .col-xs-8
                .panel-body.text-center
                  h4.mt0 150 
                  p.mb0.text-muted RETURNS
          .col-xs-6
            .row.row-table.row-flush
              .col-xs-4.text-center.text-success
                // Bar chart
                div(data-sparkline="", data-bar-color="#5d9cec", data-height="20", data-bar-width="3", data-bar-spacing="2", data-values="1,5,2,2,8,4,4,8")
              .col-xs-8
                .panel-body.text-center
                  h4.mt0 10
                  p.mb0.text-muted UNIQUES
      // END widget
    .col-lg-4
      // START widget
      .panel.widget
        .half-float
          img.img-responsive(src="img/bg3.jpg",alt="")
          .half-float-bottom
            img.img-thumbnail.img-circle.thumb128(src='img/user/09.jpg', alt="Image")
        .panel-body.text-center
          h3.m0 Ted Berry
          p.text-muted Lead director
          p Proin metus justo, commodo in ultrices at, lobortis sit amet dui. Fusce dolor purus, adipiscing a tempus at, gravida vel purus. 
        .panel-body.text-center.bg-gray-dark
          .row.row-table
            .col-xs-4
              h3.m0 400
              p.m0 Photos
            .col-xs-4
              h3.m0 2000
              p.m0 Likes
            .col-xs-4
              h3.m0 500
              p.m0 Following
      // END widget
    .col-lg-4
      // START widget
      .panel.widget
        .panel-body.text-center.bg-center(style="background-image: url('img/bg4.jpg')")
          .row.row-table
            .col-xs-12.text-white
              img.img-thumbnail.img-circle.thumb128(src='img/user/06.jpg', alt="Image")
              h3.m0 Chris
              p.m0
                em.fa.fa-twitter.fa-fw
                |  @chris

        .panel-body.text-center.bg-gray-darker
          .row.row-table
            .col-xs-4
              a(href="#").text-white: em.fa.fa-twitter.fa-2x
            .col-xs-4
              a(href="#").text-white: em.fa.fa-facebook.fa-2x
            .col-xs-4
              a(href="#").text-white: em.fa.fa-comments.fa-2x
        .list-group
          a(href="#").list-group-item
            span.label.label-primary.pull-right 15
            em.fa.fa-fw.fa-clock-o.text-muted
            |  Recent Activity
          a(href="#").list-group-item
            span.label.label-primary.pull-right 100
            em.fa.fa-fw.fa-user.text-muted
            |  Following
          a(href="#").list-group-item
            span.label.label-primary.pull-right 300
            em.fa.fa-fw.fa-folder-open-o.text-muted
            |  Photos
      // END widget
  // END row
  // START row
  .row
    .col-lg-4.col-md-6
      // START widget
      .panel.widget.bg-success
        .row.row-table
          .col-xs-4.text-center.bg-success-dark.pv-lg
            em.icon-share.fa-3x
          .col-xs-8.pv-lg
            .h1.m0.text-bold 150
            .text-uppercase New connections
    .col-lg-4.col-md-6
      // START widget
      .panel.widget.bg-danger
        .row.row-table
          .col-xs-4.text-center.bg-danger-dark.pv-lg
            em.icon-star.fa-3x
          .col-xs-8.pv-lg
            .h1.m0.text-bold 7000
            .text-uppercase Ratings received
    .col-lg-4.col-md-12
      // START widget
      .panel.widget.bg-warning
        .row.row-table
          .col-xs-4.text-center.bg-warning-dark.pv-lg
            em.icon-trophy.fa-3x
          .col-xs-8.pv-lg
            .h1.m0.text-bold 10
            .text-uppercase Achievements
  // END row
  // START row
  .row
    .col-lg-4
      // START widget
      .panel.widget
        .panel-body.bg-success
          .h5.mt0 Received all time
          // Line chart
          div(data-sparkline="", data-values="1,3,4,7,5,9,4,4,7,5,9,6,4", data-type='line', data-height='80', data-width='100%', data-line-width='2', data-line-color='#dddddd', data-spot-color='#bbbbbb', data-fill-color='', data-highlight-line-color='#fff', data-spot-radius='3', data-resize='true')
          // Bar chart
          .text-center
            div(data-sparkline="", data-bar-color="#fff", data-height="50", data-bar-width="6", data-bar-spacing="6", data-values="1,3,4,7,5,9,4,4,7,5,9,6,4")
        .panel-body.bg-inverse
          .row.row-table.text-center
            .col-xs-4
              p.m0.h3 15080
              p.m0.text-muted Shots
            .col-xs-4
              p.m0.h3 12000
              p.m0.text-muted Likes
            .col-xs-4
              p.m0.h3 5100
              p.m0.text-muted Comments
      // END widget
    .col-lg-4
      // START widget
      .panel.widget
        .panel-body.bg-primary
          .h5.mt0 Monthly incomes
          // Line chart
          div(data-sparkline="",data-type='line', data-height='80', data-width='100%', data-line-width='2', data-line-color='#dddddd', data-spot-color='#bbbbbb', data-fill-color='', data-highlight-line-color='#fff', data-spot-radius='3', data-resize='true', data-values="1,3,4,7,5,9,4,4,7,5,9,6,4")
        .panel-body.bg-inverse
          .row.text-center
            .col-xs-6
              // Bar chart
              div(data-sparkline="", data-bar-color="#5d9cec", data-height="30", data-bar-width="6", data-bar-spacing="6", data-values="1,3,4,7,5,9,4,4,7,5,9,6,4") 
            .col-xs-6
              h4.m0 +150
              p.m0.text-muted: small From last month
        .panel-body
          .row.row-table.text-center
            .col-xs-6
              p.m0.text-muted Gross income
              h4.m0 12000
            .col-xs-6
              p.m0.text-muted Net income
              h4.m0 5100
      // END widget
    .col-lg-4
      // START widget
      .panel.widget
        .row.row-table.row-flush
          .col-xs-8
            img.img-responsive(src="img/bg1.jpg", alt="")
          .col-xs-4.align-middle.bg-info
            .text-center            
              .text-lg.mt0 11&deg;
              p Cold
              em.fa.fa-sun-o.fa-2x
      // END widget
  // END row

  // START row
  .row
    .col-lg-3
      // START widget
      .panel.widget
        .row.row-table.row-flush
          .col-xs-4.bg-info.text-center
            em.fa.fa-users.fa-2x
          .col-xs-8
            .panel-body.text-center
              h4.mt0 10k
              p.mb0.text-muted VISITORS
      // END widget
    .col-lg-3
      // START widget
      .panel.widget
        .row.row-table.row-flush
          .col-xs-4.bg-danger.text-center
            em.fa.fa-music.fa-2x
          .col-xs-8
            .panel-body.text-center
              h4.mt0 100%
              p.mb0.text-muted VOLUME
      // END widget
    .col-lg-3
      // START widget
      .panel.widget
        .row.row-table.row-flush
          .col-xs-4.bg-inverse.text-center
            em.fa.fa-code-fork.fa-2x
          .col-xs-8
            .panel-body.text-center
              h4.mt0 150 
              p.mb0.text-muted FORKS
      // END widget
    .col-lg-3
      // START widget
      .panel.widget
        .row.row-table.row-flush
          .col-xs-4.bg-green.text-center
            em.fa.fa-inbox.fa-2x
          .col-xs-8
            .panel-body.text-center
              h4.mt0 10
              p.mb0.text-muted NEW MESSAGES
      // END widget
  // END row

  // START row
  .row
    .col-lg-4
      // START widget
      .panel.widget
        .row.row-table.row-flush
          .col-xs-5
            picture.lateral-picture
              img(src="img/bg2.jpg", alt="")
          .col-xs-7.align-middle.p-lg
            .pull-right
              a(href="#").btn.btn-primary.btn-sm Register
            p
              span.text-lg 16
              | Aug
            p: strong EVENT INVITATION
            p Donec posuere neque in elit luctus tempor consequat enim egestas. Nulla dictum egestas leo at lobortis.
      // END widget
    .col-lg-4
      // START widget
      .panel.widget
        .panel-body.bg-danger.text-center
          .clearfix
            .pull-left 200 Following
            .pull-right 150 Followers
          img.img-thumbnail.img-circle.thumb96(src="img/user/06.jpg", alt="Image")
          h4.mt0 Lois Berry
          p.m0
            em.fa.fa-fw.fa-map-marker
            |  San Francisco, California
          .clearfix
            .pull-left 15k Likes
            .pull-right 100 Feeds
      // END widget
    .col-lg-4
      // START widget
      .panel.widget
        .gmap.gmap-sm(data-gmap="", data-zoom='14', data-address='276 N TUSTIN ST, ORANGE, CA 92867', data-toggle="gmap")
        .panel-body.bg-inverse
          .row.row-table
            .col-xs-6
              .h2.m0 Find Us!
            .col-xs-1
              em.fa.fa-map-marker.fa-3x
            .col-xs-5
              p.m0 Street 123
              p.m0 Location, Unknow
      // END widget
  // END row

  // START row
  .row
    .col-lg-4
      // START widget
      .panel.widget
        img.img-responsive(src="img/bg1.jpg", alt="Image")
        .panel-body
          .row.row-table.text-center
            .col-xs-4
              p Comments
              h3.m0.text-primary 700
            .col-xs-4
              p Likes
              h3.m0.text-primary 1500
            .col-xs-4
              p Shots
              h3.m0.text-primary 300
      // END widget
    .col-lg-4
      // START widget
      .panel.widget
        .panel-body
          .row.row-table
            .col-xs-6.text-center
              img.img-circle.thumb96(src='img/user/09.jpg', alt="Image")
            .col-xs-6
              h3.mt0 Peggy Peters
              ul.list-unstyled
                li.mb-sm
                  em.fa.fa-map-marker.fa-fw
                  |  ASD, Qwerty
                li.mb-sm
                  em.fa.fa-twitter.fa-fw
                  |  @asdasd
                li.mb-sm
                  em.fa.fa-envelope.fa-fw
                  |  asdasd@mail.com
        .panel-body.bg-inverse
          .row.row-table.text-center
            .col-xs-4
              p.m0.h3 700
              p.m0.text-muted Followers
            .col-xs-4
              p.m0.h3 1500
              p.m0.text-muted Following
            .col-xs-4
              p.m0.h3 510
              p.m0.text-muted Loved
      // END widget
      // START widget
      .panel.widget
        .panel-body
          .row.row-table
            .col-xs-6.text-center
              img.img-thumbnail.img-circle.img-responsive.thumb96(src="img/user/06.jpg", alt="Image")
            .col-xs-6
              .pull-right
                a(href="#").btn.btn-success Follow
              h3.mt0 Sarah Pierce
              p.text-muted 150 Following / 100 Followers
      // END widget
    .col-lg-4
      .row
        .col-sm-6
          // START widget
          .panel.widget
            .panel-body.bg-info.text-center
              .text-lg.m0 300
              p Re-Tweets
              .mb-lg
              em.fa.fa-twitter.text-alpha
          // END widget
        .col-sm-6
          // START widget
          .panel.widget
            .panel-body.bg-primary.text-center
              .text-lg.m0 12&deg;
              p Bariloche
              .mb-lg
              em.fa.fa-sun-o
          // END widget
      .row
        .col-sm-6
          // START widget
          .panel.widget
            .panel-body.bg-danger.text-center
              .radial-bar.radial-bar-40.radial-bar.radial-bar-danger.m0
                img(src="img/user/03.jpg",alt="")
              p
                strong 40% 
                span complete
          // END widget
        .col-sm-6
          // START widget
          .panel.widget
            .panel-body.bg-purple.text-center
              p: img.img-rounded.thumb80(src='img/user/08.jpg',alt="")
              p
                strong Mika 
                span is now following you
          // END widget
      .row
      // START widget
      .panel.widget
        .panel-body
          .row.row-table
            .col-xs-3.text-center
              img.img-thumbnail.img-circle.img-responsive.thumb64(src="img/user/06.jpg", alt="Image")
            .col-xs-5.text-center
              h3.m0 Sylvia Morris
            .col-xs-4
              a(href="#").btn.btn-purple 
                em.fa.fa-hand-o-right
                span  Touch
      // END widget
  // END row

  // START row
  .row
    .col-lg-3.col-md-6
      // START panel
      .panel.panel-primary
        .panel-heading
          .row
            .col-xs-3
              em.fa.fa-comments.fa-5x
            .col-xs-9.text-right
              .text-lg 26
              p.m0 New Comments!
        a(href='#').panel-footer.bg-gray-dark.bt0.clearfix.btn-block
          span.pull-left View Details
          span.pull-right
            em.fa.fa-chevron-circle-right
        // END panel
    .col-lg-3.col-md-6
      // START panel
      .panel.panel-green
        .panel-heading
          .row
            .col-xs-3
              em.fa.fa-tasks.fa-5x
            .col-xs-9.text-right
              .text-lg 12
              p.m0 New Tasks!
        a(href='#').panel-footer.bg-gray-dark.bt0.clearfix.btn-block
          span.pull-left View Details
          span.pull-right
            em.fa.fa-chevron-circle-right
      // END panel
    .col-lg-3.col-md-6
      // START panel
      .panel.panel-warning
        .panel-heading
          .row
            .col-xs-3
              em.fa.fa-shopping-cart.fa-5x
            .col-xs-9.text-right
              .text-lg 124
              p.m0 New Orders!
        a(href='#').panel-footer.bg-gray-dark.bt0.clearfix.btn-block
          span.pull-left View Details
          span.pull-right
            em.fa.fa-chevron-circle-right
      // END panel
    .col-lg-3.col-md-6
      // START panel
      .panel.panel-danger
        .panel-heading
          .row
            .col-xs-3
              em.fa.fa-support.fa-5x
            .col-xs-9.text-right
              .text-lg 13
              p.m0 Support Tickets!
        a(href='#').panel-footer.bg-gray-dark.bt0.clearfix.btn-block
          span.pull-left View Details
          span.pull-right
            em.fa.fa-chevron-circle-right
      // END panel
  // END row
  // START panel tab
  .panel(role='tabpanel')
    // Nav tabs
    ul.nav.nav-tabs.nav-justified(role='tablist')
      li.active(role='presentation')
        a(href='#home', aria-controls='home', role='tab', data-toggle='tab')
          em.fa.fa-clock-o.fa-fw
          | Tasks Panel
      li(role='presentation')
        a(href='#profile', aria-controls='profile', role='tab', data-toggle='tab')
          em.fa.fa-money.fa-fw
          | Transactions Panel
    // Tab panes
    .tab-content.p0
      #home.tab-pane.active(role='tabpanel') 
        // START list group
        .list-group.mb0
          a.list-group-item(href='#')
            span.label.label-purple.pull-right just now
            em.fa.fa-fw.fa-calendar.mr
            | Calendar updated
          a.list-group-item(href='#')
            span.label.label-purple.pull-right 4 minutes ago
            em.fa.fa-fw.fa-comment.mr
            | Commented on a post
          a.list-group-item(href='#')
            span.label.label-purple.pull-right 23 minutes ago
            em.fa.fa-fw.fa-truck.mr
            | Order 392 shipped
          a.list-group-item(href='#')
            span.label.label-purple.pull-right 46 minutes ago
            em.fa.fa-fw.fa-money.mr
            | Invoice 653 has been paid
          a.list-group-item(href='#')
            span.label.label-purple.pull-right 1 hour ago
            em.fa.fa-fw.fa-user.mr
            | A new user has been added
          a.list-group-item(href='#')
            span.label.label-purple.pull-right 2 hours ago
            em.fa.fa-fw.fa-check.mr
            | Completed task: "pick up dry cleaning"
          a.list-group-item(href='#')
            span.label.label-purple.pull-right yesterday
            em.fa.fa-fw.fa-globe.mr
            | Saved the world
          a.list-group-item(href='#')
            span.label.label-purple.pull-right two days ago
            em.fa.fa-fw.fa-check.mr
            | Completed task: "fix error on sales page"
          a.list-group-item(href='#')
            span.label.label-purple.pull-right two days ago
            em.fa.fa-fw.fa-check.mr
            | Completed task: "fix error on sales page"
        // END list group
        .panel-footer.text-right
          a.btn.btn-default.btn-sm(href='#') View All Activity 
      #profile.tab-pane(role='tabpanel')
        // START table responsive
        .table-responsive
          table.table.table-bordered.table-hover.table-striped
            thead
              tr
                th Order #
                th Order Date
                th Order Time
                th Amount (USD)
            tbody
              tr
                td 3326
                td 10/21/2013
                td 3:29 PM
                td $321.33
              tr
                td 3325
                td 10/21/2013
                td 3:20 PM
                td $234.34
              tr
                td 3324
                td 10/21/2013
                td 3:03 PM
                td $724.17
              tr
                td 3323
                td 10/21/2013
                td 3:00 PM
                td $23.71
              tr
                td 3322
                td 10/21/2013
                td 2:49 PM
                td $8345.23
              tr
                td 3321
                td 10/21/2013
                td 2:23 PM
                td $245.12
              tr
                td 3320
                td 10/21/2013
                td 2:15 PM
                td $5663.54
              tr
                td 3319
                td 10/21/2013
                td 2:13 PM
                td $943.45
        // END table responsive
        .panel-footer.text-right
          a.btn.btn-default.btn-sm(href='#') View All Transactions

  // END panel tab

block vendor_js
  // SPARKLINE
  script(src='../vendor/sparkline/index.js')
  // GOOGLE MAPS
  script(type='text/javascript', src='http://maps.google.com/maps/api/js?sensor=false')
  script(src='../vendor/jQuery-gMap/jquery.gmap.min.js')
